<template>
  <el-container style="height: 100%;">
    <el-aside width="220px" style="background-color: #f5f7fa; border-right: 1px solid #e4e7ed;">
      <el-menu
          :default-active="activePath"
      mode="vertical"
      @select="handleSelect"
      background-color="#f5f7fa"
      text-color="#333"
      active-text-color="#1890ff"
      style="height: 100%; border-right: none;"
      ref="menu"
      >
      <el-menu-item index="/home/datamonitor/realtime">
        <i class="el-icon-time"></i>
        <span>实时数据</span>
      </el-menu-item>

      <el-menu-item index="/home/datamonitor/visualization">
        <i class="el-icon-pie-chart"></i>
        <span>数据可视化</span>
      </el-menu-item>

      <el-menu-item index="/home/datamonitor/abnormal">
        <i class="el-icon-warning"></i>
        <span>数据异常检测</span>
      </el-menu-item>

        <el-menu-item v-if="hasPermission('user:manage')" index="/home/datamonitor/equipmentrepair">
          <i class="el-icon-setting"></i>
          <span>设备维修</span>
        </el-menu-item>
        <el-menu-item v-if="hasPermission('device:repair')" index="/home/datamonitor/myrepair">
          <i class="el-icon-setting"></i>
          <span>我的设备维修</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-main style="padding: 20px;">
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
import {hasPermission} from "@/utils/permission";

export default {
  name: 'DataMonitor',  // 修正组件名，与功能匹配
  data() {
    return {
      activePath: ''  // 存储当前选中的路径
    };
  },
  mounted() {
    // 初始化时设置默认选中项（实时数据）
    this.setDefaultActive();
  },
  methods: {
    hasPermission,
    handleSelect(key) {
      // 点击左侧导航项跳转对应子路由
      this.$router.push(key);
    },
    // 关键：设置默认选中项，优先匹配当前路由，否则默认选中"实时数据"
    setDefaultActive() {
      const currentPath = this.$route.path;
      // 定义所有有效的导航项路径
      const validPaths = [
        '/home/datamonitor/realtime',
        '/home/datamonitor/visualization',
        '/home/datamonitor/abnormal',
        '/home/datamonitor/equipmentrepair',
        '/home/datamonitor/myrepair'
      ];
      // 如果当前路由是有效的导航项，则选中对应项；否则默认选中"实时数据"
      this.activePath = validPaths.includes(currentPath) ? currentPath : '/home/datamonitor/realtime';
      // 手动更新菜单选中状态
      this.$refs.menu.activeIndex = this.activePath;
    }
  },
  watch: {
    // 路由变化时同步选中状态
    '$route'() {
      this.$nextTick(() => {
        this.setDefaultActive();
      });
    }
  }
}
</script>

<style scoped>
.el-aside {
  min-height: calc(100vh - 120px); /* 减去顶部和底部导航高度 */
}
.el-menu {
  border-right: none; /* 去除右侧边框 */
}
/* 强化选中样式，提升视觉辨识度 */
:deep(.el-menu-item.is-active) {
  background-color: #e6f7ff !important; /* 浅蓝色背景 */
  color: #1890ff !important; /* 选中文字颜色与active-text-color一致 */
  font-weight: 500; /* 选中项文字加粗 */
}

/* 优化鼠标悬停效果 */
:deep(.el-menu-item:not(.is-active):hover) {
  background-color: #f0f2f5; /* 浅灰色背景 */
}
</style>